<template>
  <el-dialog
    v-model="dialogVisible"
    title="供应商详情"
    width="80%"
    :before-close="handleClose"
  >
    <div v-if="supplier" class="supplier-detail">
      <!-- 头部信息 -->
      <div class="detail-header">
        <h3>{{ supplier.supplierName }}</h3>
        <div class="header-meta">
          <span>创建人: {{ supplier.createName || '未知' }}</span>
          <span>创建时间: {{ formatDateTime(supplier.createTime) || '未知' }}</span>
          <span>最后修改人: {{ supplier.modifierName || '未知' }}</span>
          <span>修改时间: {{ formatDateTime(supplier.modifyTime) || '未知' }}</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleEdit">编辑</el-button>
          <el-button type="danger" @click="handleDelete">删除</el-button>
          <el-button @click="handleDisable">禁用</el-button>
          <el-button type="success" @click="handlePurchase">采购</el-button>
        </div>
      </div>

      <!-- 标签页导航 -->
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="供应商信息" name="info">
          <div class="tab-content">
            <!-- 基础信息 -->
            <el-card class="info-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>基础信息</span>
                </div>
              </template>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="供应商编号">{{ supplier.supplierNumber || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商名称">{{ supplier.supplierName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="公司名称">{{ supplier.companyName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商等级">{{ supplier.supplierLevelName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商类别">{{ supplier.supplierCategoryName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商类型">{{ supplier.supplierTypeName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商状态">{{ supplier.supplierStatusName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="公司地址">{{ supplier.companyAddress || '无' }}</el-descriptions-item>
                <el-descriptions-item label="统一信用代码">{{ supplier.unifiedSocialCreditCode || '无' }}</el-descriptions-item>
                <el-descriptions-item label="营业性质">{{ supplier.businessNatureName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="所属行业">{{ supplier.industryName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="注册资本">{{ supplier.registeredCapital || '无' }}</el-descriptions-item>
                <el-descriptions-item label="所在地区">{{ supplier.locationName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="注册地址">{{ supplier.registeredAddress || '无' }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag :type="supplier.isEnabled ? 'success' : 'danger'">
                    {{ supplier.isEnabled ? '启用' : '禁用' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="2">{{ supplier.remarks || '无' }}</el-descriptions-item>
              </el-descriptions>
            </el-card>

            <!-- 联系方式 -->
            <el-card class="info-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>联系方式</span>
                </div>
              </template>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="联系人">{{ supplier.contactName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ supplier.contactPhone || '无' }}</el-descriptions-item>
                <el-descriptions-item label="联系邮箱">{{ supplier.contactEmail || '无' }}</el-descriptions-item>
                <el-descriptions-item label="采购人员">{{ supplier.purchaseRepresentativeName || '无' }}</el-descriptions-item>
              </el-descriptions>
            </el-card>

            <!-- 业务情况 -->
            <el-card class="info-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>业务情况</span>
                </div>
              </template>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="采购人员">{{ supplier.purchaseRepresentativeName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="供应商来源">{{ supplier.supplierSource || '无' }}</el-descriptions-item>
                <el-descriptions-item label="合作开始时间">{{ formatDate(supplier.cooperationStartDate) || '无' }}</el-descriptions-item>
                <el-descriptions-item label="合作结束时间">{{ formatDate(supplier.cooperationEndDate) || '无' }}</el-descriptions-item>
                <el-descriptions-item label="付款条件">{{ supplier.paymentTerms ? `${supplier.paymentTerms}天` : '无' }}</el-descriptions-item>
                <el-descriptions-item label="信用等级">{{ supplier.creditRating || '无' }}</el-descriptions-item>
                <el-descriptions-item label="是否战略合作伙伴">
                  <el-tag :type="supplier.isStrategicPartner ? 'success' : 'info'">
                    {{ supplier.isStrategicPartner ? '是' : '否' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="是否优先供应商">
                  <el-tag :type="supplier.isPreferredSupplier ? 'success' : 'info'">
                    {{ supplier.isPreferredSupplier ? '是' : '否' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>

            <!-- 附件部分已移除 -->
          </div>
        </el-tab-pane>

        <el-tab-pane label="供应商物品" name="items">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportItems">导出</el-button>
              <el-input
                v-model="itemSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="supplierItems" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="itemNumber" label="物品编号" width="150" />
              <el-table-column prop="itemName" label="物品名称" width="200" />
              <el-table-column prop="specificationModel" label="规格型号" width="150" />
              <el-table-column prop="unit" label="单位" width="100" />
              <el-table-column prop="itemCategory" label="物品类别" width="120" />
              <el-table-column prop="itemAttribute" label="物品属性" width="120" />
              <el-table-column prop="itemType" label="物品类型" width="120" />
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewItem(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="itemPagination.currentPage"
              v-model:page-size="itemPagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="itemPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleItemSizeChange"
              @current-change="handleItemCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="采购记录" name="purchases">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportPurchases">导出</el-button>
              <el-input
                v-model="purchaseSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="purchaseRecords" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="purchaseCode" label="采购编码" width="150" />
              <el-table-column prop="purchaseOrderSubject" label="采购订单主题" width="200" />
              <el-table-column prop="purchaseDate" label="采购日期" width="120" />
              <el-table-column prop="itemSummary" label="物品概要" width="200" />
              <el-table-column prop="purchasingDepartment" label="采购部门" width="120" />
              <el-table-column prop="purchaser" label="采购人员" width="120" />
              <el-table-column prop="totalAmount" label="总金额" width="120" />
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewPurchase(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="purchasePagination.currentPage"
              v-model:page-size="purchasePagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="purchasePagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handlePurchaseSizeChange"
              @current-change="handlePurchaseCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="入库记录" name="inbounds">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportInbounds">导出</el-button>
              <el-input
                v-model="inboundSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="inboundRecords" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="inboundOrderNumber" label="入库单号" width="150" />
              <el-table-column prop="inboundOrderSubject" label="入库订单主题" width="200" />
              <el-table-column prop="inboundDate" label="入库日期" width="120" />
              <el-table-column prop="inboundType" label="入库类型" width="120" />
              <el-table-column prop="totalInboundQuantity" label="入库总量" width="120" />
              <el-table-column prop="inboundAmount" label="入库金额" width="120" />
              <el-table-column prop="inboundPerson" label="入库人" width="120" />
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewInbound(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="inboundPagination.currentPage"
              v-model:page-size="inboundPagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="inboundPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleInboundSizeChange"
              @current-change="handleInboundCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="付款记录" name="payments">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportPayments">导出</el-button>
              <el-input
                v-model="paymentSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="paymentRecords" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="expenseOrderNumber" label="支出单号" width="150" />
              <el-table-column prop="expenseSubject" label="支出主题" width="200" />
              <el-table-column prop="paymentDate" label="支付日期" width="120" />
              <el-table-column prop="paymentAmount" label="付款金额" width="120" />
              <el-table-column prop="bankAccount" label="银行账号" width="150" />
              <el-table-column prop="remarks" label="备注" width="200" />
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewPayment(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="paymentPagination.currentPage"
              v-model:page-size="paymentPagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="paymentPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handlePaymentSizeChange"
              @current-change="handlePaymentCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="到票记录" name="invoices">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportInvoices">导出</el-button>
              <el-input
                v-model="invoiceSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="invoiceRecords" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="invoiceNo" label="到票编号" width="150" />
              <el-table-column prop="invoiceSubject" label="到票主题" width="200" />
              <el-table-column prop="invoiceDate" label="到票日期" width="120" />
              <el-table-column prop="invoiceType" label="发票类型" width="120" />
              <el-table-column prop="invoiceNumber" label="发票号码" width="150" />
              <el-table-column prop="invoiceAmount" label="到票金额" width="120" />
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="viewInvoice(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="invoicePagination.currentPage"
              v-model:page-size="invoicePagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="invoicePagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleInvoiceSizeChange"
              @current-change="handleInvoiceCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="操作记录" name="operations">
          <div class="tab-content">
            <div class="table-actions">
              <el-button type="primary" @click="exportOperations">导出</el-button>
              <el-input
                v-model="operationSearchKeyword"
                placeholder="请搜索"
                style="width: 300px"
                clearable
              >
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
            </div>
            <el-table :data="operationRecords" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="serialNumber" label="序号" width="80" />
              <el-table-column prop="operator" label="操作人" width="120" />
              <el-table-column prop="operationTime" label="操作时间" width="180" />
              <el-table-column prop="operationContent" label="操作内容" width="300" />
            </el-table>
            <el-pagination
              v-model:current-page="operationPagination.currentPage"
              v-model:page-size="operationPagination.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="operationPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleOperationSizeChange"
              @current-change="handleOperationCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// Props
const props = defineProps<{
  modelValue: boolean
  supplier?: any
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'edit': [supplier: any]
  'delete': [supplier: any]
}>()

// 响应式数据
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('info')

// 搜索关键词
const itemSearchKeyword = ref('')
const purchaseSearchKeyword = ref('')
const inboundSearchKeyword = ref('')
const paymentSearchKeyword = ref('')
const invoiceSearchKeyword = ref('')
const operationSearchKeyword = ref('')

// 分页配置
const itemPagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const purchasePagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const inboundPagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const paymentPagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const invoicePagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

const operationPagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 模拟数据
const supplierItems = ref([
  {
    serialNumber: 1,
    itemNumber: 'CPBH2023512698',
    itemName: '随便吹空调',
    specificationModel: 'WM-2000-LAZY',
    unit: '台',
    itemCategory: '成品',
    itemAttribute: '自制',
    itemType: '家用电器'
  }
])

const purchaseRecords = ref([
  {
    serialNumber: 1,
    purchaseCode: 'XSDH2023512698',
    purchaseOrderSubject: '新产品采购0234',
    purchaseDate: '2027-06-08',
    itemSummary: '新产品等10项',
    purchasingDepartment: '生成部门',
    purchaser: '尚凌春',
    totalAmount: '10,000'
  }
])

const inboundRecords = ref([
  {
    serialNumber: 1,
    inboundOrderNumber: 'RKDH202202303',
    inboundOrderSubject: '物料采购入库',
    inboundDate: '2026-02-12',
    inboundType: '采购出库',
    totalInboundQuantity: 50,
    inboundAmount: '5000.00',
    inboundPerson: '豆润'
  }
])

const paymentRecords = ref([
  {
    serialNumber: 1,
    expenseOrderNumber: 'ZCDH202202303',
    expenseSubject: '物料001534采购支付',
    paymentDate: '2026-02-12',
    paymentAmount: '5000.00',
    bankAccount: '600053452155222',
    remarks: ''
  }
])

const invoiceRecords = ref([
  {
    serialNumber: 1,
    invoiceNo: 'DP2022080422303',
    invoiceSubject: '物料154采购到票',
    invoiceDate: '2022-02-12',
    invoiceType: '增值税发票',
    invoiceNumber: '0000000000',
    invoiceAmount: '35156.00'
  }
])

const operationRecords = ref([
  {
    serialNumber: 1,
    operator: '孙十二',
    operationTime: '2024-06-27 19:15:59',
    operationContent: '新增'
  },
  {
    serialNumber: 2,
    operator: '黄十一',
    operationTime: '2024-06-27 18:30:08',
    operationContent: '上传文件'
  }
])

// 初始化分页总数，使其与实际数据条数一致
const initializePagination = () => {
  itemPagination.total = supplierItems.value.length
  purchasePagination.total = purchaseRecords.value.length
  inboundPagination.total = inboundRecords.value.length
  paymentPagination.total = paymentRecords.value.length
  invoicePagination.total = invoiceRecords.value.length
  operationPagination.total = operationRecords.value.length
  
  console.log('分页总数初始化:', {
    items: itemPagination.total,
    purchases: purchasePagination.total,
    inbounds: inboundPagination.total,
    payments: paymentPagination.total,
    invoices: invoicePagination.total,
    operations: operationPagination.total
  })
}

// 监听供应商数据变化，重新初始化分页
watch(() => props.supplier, () => {
  if (props.supplier) {
    // 延迟初始化，确保DOM已更新
    nextTick(() => {
      initializePagination()
    })
  }
}, { immediate: true })

// 组件挂载时初始化分页
onMounted(() => {
  initializePagination()
})

// 工具方法
const formatDateTime = (dateTime: string | Date | null | undefined) => {
  if (!dateTime) return null
  try {
    const date = new Date(dateTime)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch {
    return dateTime
  }
}

const formatDate = (date: string | Date | null | undefined) => {
  if (!date) return null
  try {
    const dateObj = new Date(date)
    return dateObj.toLocaleDateString('zh-CN')
  } catch {
    return date
  }
}

// 方法
const handleClose = () => {
  dialogVisible.value = false
}

const handleEdit = () => {
  console.log('编辑按钮被点击，供应商数据:', props.supplier)
  emit('edit', props.supplier)
  dialogVisible.value = false
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除供应商"${props.supplier?.supplierName}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    emit('delete', props.supplier)
    dialogVisible.value = false
  } catch (error) {
    // 用户取消删除
  }
}

const handleDisable = () => {
  ElMessage.info('禁用功能待实现')
}

const handlePurchase = () => {
  ElMessage.info('采购功能待实现')
}



const exportItems = () => {
  ElMessage.info('导出物品功能待实现')
}

const exportPurchases = () => {
  ElMessage.info('导出采购记录功能待实现')
}

const exportInbounds = () => {
  ElMessage.info('导出入库记录功能待实现')
}

const exportPayments = () => {
  ElMessage.info('导出付款记录功能待实现')
}

const exportInvoices = () => {
  ElMessage.info('导出到票记录功能待实现')
}

const exportOperations = () => {
  ElMessage.info('导出操作记录功能待实现')
}

const viewItem = (item: any) => {
  ElMessage.info('查看物品详情功能待实现')
}

const viewPurchase = (purchase: any) => {
  ElMessage.info('查看采购记录详情功能待实现')
}

const viewInbound = (inbound: any) => {
  ElMessage.info('查看入库记录详情功能待实现')
}

const viewPayment = (payment: any) => {
  ElMessage.info('查看付款记录详情功能待实现')
}

const viewInvoice = (invoice: any) => {
  ElMessage.info('查看到票记录详情功能待实现')
}

// 分页处理方法
const handleItemSizeChange = (size: number) => {
  itemPagination.pageSize = size
  itemPagination.currentPage = 1
}

const handleItemCurrentChange = (page: number) => {
  itemPagination.currentPage = page
}

const handlePurchaseSizeChange = (size: number) => {
  purchasePagination.pageSize = size
  purchasePagination.currentPage = 1
}

const handlePurchaseCurrentChange = (page: number) => {
  purchasePagination.currentPage = page
}

const handleInboundSizeChange = (size: number) => {
  inboundPagination.pageSize = size
  inboundPagination.currentPage = 1
}

const handleInboundCurrentChange = (page: number) => {
  inboundPagination.currentPage = page
}

const handlePaymentSizeChange = (size: number) => {
  paymentPagination.pageSize = size
  paymentPagination.currentPage = 1
}

const handlePaymentCurrentChange = (page: number) => {
  paymentPagination.currentPage = page
}

const handleInvoiceSizeChange = (size: number) => {
  invoicePagination.pageSize = size
  invoicePagination.currentPage = 1
}

const handleInvoiceCurrentChange = (page: number) => {
  invoicePagination.currentPage = page
}

const handleOperationSizeChange = (size: number) => {
  operationPagination.pageSize = size
  operationPagination.currentPage = 1
}

const handleOperationCurrentChange = (page: number) => {
  operationPagination.currentPage = page
}
</script>

<style scoped>
.supplier-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.detail-header h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 20px;
}

.header-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.detail-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
}

.table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: 600;
  color: #333;
}

.attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.attachment-actions {
  display: flex;
  gap: 8px;
}

.no-attachments {
  text-align: center;
  color: #999;
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style> 